<template>
    <div id="leftBar" class="bg-white w-64 h-screen shadow-md fixed top-0 left-0">
        <div class="py-8 px-4">
            <h2 class="text-center text-2xl font-extrabold text-gray-900">
                功能菜单
            </h2>
        </div>
        <ul class="px-4 space-y-2">
            <li>
                <a @click="gotoFullChat" class='nav-link' :class="{
                    'flex items-center space-x-2 py-2 px-4 rounded-md text-gray-600 hover:bg-blue-100 hover:text-blue-500': true,
                    'bg-blue-100 text-blue-500': currentRoute.path === '/home/chat'
                }">
                    <i class="fa-solid fa-file-lines"></i>
                    <svg t="1746602521743" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3623" width="16" height="16">
                        <path
                            d="M511.5 957.9C264.9 957.9 65 758.2 65 511.9s199.9-446 446.5-446S958 265.6 958 511.9c0.1 246.3-199.8 446-446.5 446zM509 149.1c-200.4 0-355.8 162.2-355.8 362.3 0 200.1 155.4 356.8 355.8 356.8s362.9-156.7 362.9-356.8c0-200.1-162.5-362.3-362.9-362.3zM690.5 556h-134v133.8c0 24.6-20 44.6-44.6 44.6h-0.1c-24.6 0-44.6-19.9-44.6-44.6V556h-134c-24.7 0-44.6-19.9-44.6-44.5v-0.1c0-24.6 20-44.6 44.6-44.6h134V333c0-24.6 20-44.6 44.6-44.6h0.1c24.7 0 44.6 19.9 44.6 44.6v133.8h134c24.7 0 44.6 19.9 44.6 44.6v0.1c0 24.6-19.9 44.5-44.6 44.5z m0 0"
                            p-id="3624"></path>
                    </svg>
                    <span>全文对话</span>
                </a>
            </li>
            <li>
                <a @click="gotoStream" class='nav-link' :class="{
                    'flex items-center space-x-2 py-2 px-4 rounded-md text-gray-600 hover:bg-blue-100 hover:text-blue-500': true,
                    'bg-blue-100 text-blue-500': currentRoute.path === '/home/stream'
                }">
                    <i class="fa-solid fa-file-lines"></i>
                    <svg t="1747746172866" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3227" width="16" height="16">
                        <path
                            d="M768 800.96H256a64 64 0 0 1-64-64v-224a32 32 0 1 1 64 0v224h512v-224a32 32 0 0 1 64 0v224a64 64 0 0 1-64 64z m-352-512H224a32 32 0 1 1 0-64h192a32 32 0 1 1 0 64z m-64 128H224a32 32 0 1 1 0-64h128a32 32 0 1 1 0 64z m320 256H352a32 32 0 1 1 0-64h320a32 32 0 0 1 0 64z m-288-128h-32a32 32 0 1 1 0-64h32a32 32 0 1 1 0 64z m192-231.04l41.28 50.56a71.36 71.36 0 0 1 4.48 96 67.2 67.2 0 0 1-93.76 0 69.76 69.76 0 0 1 4.8-96l13.44-16.96 27.84-34.88 1.92 1.28zM574.08 224a18.88 18.88 0 0 0-14.4 6.4c-21.44 24.32-53.12 64-76.8 94.08-46.4 57.92-50.56 131.84 0 181.76a131.2 131.2 0 0 0 183.68 0 133.44 133.44 0 0 0 0-181.76c-24.96-32-57.28-70.4-78.4-94.08a18.88 18.88 0 0 0-12.16-5.44L574.08 224z"
                            fill="#202425" p-id="3228"></path>
                    </svg>
                    <span>流式对话</span>
                </a>
            </li>
            <!--             <li>
                <a @click="gotoChatStream" class='nav-link' :class="{
                    'flex items-center space-x-2 py-2 px-4 rounded-md text-gray-600 hover:bg-blue-100 hover:text-blue-500': true,
                    'bg-blue-100 text-blue-500': currentRoute.path === '/home/chatStream'
                }">
                    <i class="fa-solid fa-database"></i>
                    <span>流式对话</span>
                </a>
            </li> -->
            <li>
                <a @click="gotoDrawIO" class='nav-link' :class="{
                    'flex items-center space-x-2 py-2 px-4 rounded-md text-gray-600 hover:bg-blue-100 hover:text-blue-500': true,
                    'bg-blue-100 text-blue-500': currentRoute.path === '/home/drawIO'
                }">
                    <i class="fa-solid fa-lock"></i><svg t="1746602586922" class="icon" viewBox="0 0 1024 1024"
                        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5740" width="16" height="16">
                        <path
                            d="M513.002755 1015.502075c-278.804183 0-505.626556-226.822373-505.626556-505.626556 0-278.804183 226.822373-505.626556 505.626556-505.626556 278.804183 0 505.626556 226.822373 505.626556 505.626556 0 278.804183-226.818124 505.626556-505.626556 505.626556z m0-947.518673c-243.661012 0-441.892116 198.231104-441.892116 441.892117s198.231104 441.892116 441.892116 441.892116 441.892116-198.231104 441.892116-441.892116-198.231104-441.892116-441.892116-441.892117z"
                            p-id="5741"></path>
                        <path
                            d="M513.002755 774.364946c-83.823535 0-169.508116-40.985494-254.670075-121.826257-61.567469-58.440232-99.57444-116.349344-101.159302-118.784l-11.336233-17.399502 11.336233-17.399502c6.403187-9.823602 159.04717-240.59751 355.829377-240.597511 83.827784 0 169.512365 40.985494 254.674324 121.81776 61.567469 58.435983 99.57444 116.345095 101.159303 118.779751l11.340481 17.399502-11.336232 17.399502c-6.403187 9.823602-159.04717 240.610257-355.837876 240.610257zM222.90483 516.333942c37.514091 50.613643 155.843452 194.300813 290.097925 194.300813 134.233228 0 252.537095-143.619187 290.08093-194.275319-37.531087-50.634888-155.839203-194.262573-290.08093-194.262573-134.611386-0.004249-252.647568 143.576697-290.097925 194.237079z"
                            p-id="5742"></path>
                        <path
                            d="M513.002755 631.421344c-66.118108 0-119.909975-53.791867-119.909975-119.914224 0-66.118108 53.791867-119.909975 119.909975-119.909975 66.122357 0 119.914224 53.791867 119.914224 119.909975 0 66.122357-53.791867 119.914224-119.914224 119.914224z m0-176.08551c-30.974938 0-56.175535 25.200598-56.175535 56.175535s25.200598 56.179784 56.175535 56.179785 56.179784-25.204846 56.179784-56.179785-25.204846-56.175535-56.179784-56.175535z"
                            p-id="5743"></path>
                    </svg>
                    <span>流程可视化</span>
                </a>
            </li>
            <li>
                <a @click="gotoHistory" class='nav-link' :class="{
                    'flex items-center space-x-2 py-2 px-4 rounded-md text-gray-600 hover:bg-blue-100 hover:text-blue-500': true,
                    'bg-blue-100 text-blue-500': currentRoute.path === '/home/history'
                }">
                    <i class="fa-solid fa-lock"></i>
                    <svg t="1746602615634" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6772" width="16" height="16">
                        <path
                            d="M822.496 473.152l52.053333 29.290667C869.461333 306.56 709.098667 149.333333 512 149.333333c-200.298667 0-362.666667 162.368-362.666667 362.666667s162.368 362.666667 362.666667 362.666667c122.538667 0 234.645333-61.194667 301.578667-161.152a32 32 0 1 1 53.173333 35.616C788.064 866.634667 656.117333 938.666667 512 938.666667 276.362667 938.666667 85.333333 747.637333 85.333333 512S276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667c0 10.954667-0.853333 26.357333-2.517334 46.528-1.930667 23.242667-27.274667 36.682667-47.594666 25.248l-97.450667-54.848a32 32 0 1 1 31.392-55.786667z m-493.12 176.213333L480 498.762667V320a32 32 0 0 1 64 0v192a32 32 0 0 1-9.376 22.624l-160 160a32 32 0 1 1-45.248-45.248z"
                            fill="#000000" p-id="6773"></path>
                    </svg>
                    <span>问答记录</span>
                </a>
            </li>
        </ul>
        <el-divider />
        <span class="text-slate-400 text-sm">历史对话</span>
        <div class="h-auto overflow-y-auto">
            <ul class="px-4 space-y-1">
                <li v-for="history in historyArray" :key="history.sessionId">
                    <a @click="selectHistory(history.sessionId)" class='nav-link' :class="{
                    'flex items-center space-x-2 py-2 px-4 rounded-md text-gray-600 hover:bg-slate-200 hover:text-slate-500': true,
                    'bg-slate-200 text-slate-500': selectedSessionId === history.sessionId
                }">
                        <i class="fa-solid fa-database"></i>
                        <span class="text-sm">{{ history.content }}</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useRouter, useRoute } from 'vue-router';
import { ref, onMounted } from 'vue';
import { useAdminInfoStore } from '../../../store';
import { useHistoryApi } from '../../../api/history';
import { ElMessage } from 'element-plus';
// 定义历史会话类型
interface HistoryItem {
    sessionId: string;
    content: string;
}

const adminStore = useAdminInfoStore();
const historyApi = new useHistoryApi();
const router = useRouter();
const currentRoute = useRoute();
const gotoFullChat = () => {
    selectedSessionId.value = '';
    router.push('/home/chat');
}

/* const gotoChatStream = () => {
    router.push('/home/chatStream');
} */

const gotoStream = () => {
    router.push('/home/stream');
}

const gotoDrawIO = () => {
    selectedSessionId.value = '';
    router.push('/home/drawIO');
}

const gotoHistory = () => {
    selectedSessionId.value = '';
    router.push('/home/history')
}

const historyArray = ref<HistoryItem[]>([]);
const selectedSessionId = ref('');
const selectHistory = (sessionId: string) => {
    selectedSessionId.value = sessionId;
    router.push({
        path: '/home/session',
        query: {
            sessionId: selectedSessionId.value
        }
    });
}

// 获取历史对话记录
const getHistoryArray = () => {
    historyApi.getHistoryArray(adminStore.getId).then(response => {
        if (response.data.code == 1) {
            historyArray.value = response.data.data.dataList;
        } else {
            ElMessage.error(response.data.message);
        }
    }).catch(error => {
        console.error(error);
    })
}

onMounted(() => {
    getHistoryArray();
});
</script>

<style scoped>
.nav-link {
    cursor: pointer;
}
</style>